html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #F0F0D8;
  font-family: 'Patrick Hand SC', cursive;
}
html  button, body  button {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  background: transparent;
  padding: 1px 1px;
  margin: 3px 8px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  color: #41403E;
  font-size: 22px;
  letter-spacing: 1px;
  outline: none;
  box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}
html  button:hover, body  button:hover {
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}
html  button.lined.thick, body  button.lined.thick {
  border: solid 7px #41403E;
}
html  button.dotted.thick, body  button.dotted.thick {
  border: dotted 5px #41403E;
}
html  button.dashed.thick, body  button.dashed.thick {
  border: dashed 5px #41403E;
}
html  button.lined.thin, body  button.lined.thin {
  border: solid 2px #41403E;
}
html  button.dotted.thin, body  button.dotted.thin {
  border: dotted 2px #41403E;
}
html  button.dashed.thin, body  button.dashed.thin {
  border: dashed 2px #41403E;
}

@media (max-width: 620px) {
  body h1 {
    margin-top: 2rem;
  }
  body  button {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
    margin-bottom: 2rem;
  }
}
